// 柱状图组件
import { useEffect, useRef } from 'react'

import * as echarts from 'echarts';
const BarChart = ({ titleText, xAxisData, seriesData }) => {

	const chartRef = useRef(null)
	useEffect(() => {
		// 基于准备好的dom，初始化echarts实例
		const chartDom = chartRef.current;
		// 初始化echarts实例
		const myChart = echarts.init(chartDom);
		// 指定图表的配置项和数据
		const option = {
			title: {
				text: titleText
			},
			xAxis: {
				type: 'category',
				data: xAxisData
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{
					data: seriesData,
					type: 'bar'
				}
			]
		};
		// 使用刚指定的配置项和数据显示图表。
		option && myChart.setOption(option);
	}, [])
	return (
		<div ref={chartRef} style={{ width: '500px', height: '500px' }} ></div >
	)
}

export default BarChart